<template>
  <div class="todo-header">
    <!-- 
       修饰符:@click.xxx 
       enter回车键
       stop 阻止事件传播
       prevent 阻止默认事件
       once  事件只能触发一次
     -->
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="enterHandler"/>
  </div>
</template>

<script>
export default {
  name: "",
  props:['addTodo'],
  methods:{
     //键盘事件的回调
     enterHandler(e){
       //当用户按下回车的时候，需要调用父组件App的方法，向父组件数组当中添加一个元素
       //按下回车,准备新的元素 
       //id:每一个元素ID需要唯一(v-for,元素的key唯一的)
       //title:用户在文本框中输入内容  event|ref|v-model都可以获取用户输入内容
       //done:新增的事件否选的状态为false
     
       //在给父组件传递新的事件的时候，保证用户在文本框中内容不能空的，如果是空的不应该给父亲！！！
       //用户输入的内容为空的不在执行后面的语句
       if(e.target.value.trim()===''){
         alert('输入内容不能为空的');
         return;
       }
       //调用父组件的方法,新增一个事件
       let newTodo = {id:Date.now(),title:e.target.value,done:false};
       this.addTodo(newTodo);
       //清空文本框内容
       e.target.value = '';
     }
  }
};
</script>

<style scoped>
</style>
